<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>2.0过滤动画</title>
    <script type="text/javascript" src="js/vue2.js"></script>
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <style>
        p{
            width:100px;
            height:100px;
            background:#f00;
        }
        .fade-enter-active,.fade-leave-active{
            transition: 1s all ease;
        }
        .fade-enter-active{
            width: 100px;
            height: 100px;
            opacity: 1;
        }
        .fade-enter,.fade-leave,.fade-leave-active{   /* 第一种transition好像fade-enter需要写在下面 不然会影响效果 1.0的那种写法已废弃 */
            width: 50px;
            height: 50px;
            opacity: 0;
        }
    </style>
	<script type="text/javascript">
        window.onload = function(){	
            new Vue({
                el:"#box",
                data:{
                    show:false
                },
                methods:{
                    beforeEnter(){
                        console.log("动画进入之前");
                    },
                    enter(){
                        console.log("动画进入");
                    },
                    afterEnter(){
                        console.log("动画进入之后");
                    },
                    beforeLeave(){
                        console.log("动画离开之前");
                    },
                    leave(){
                        console.log("动画离开");
                    },
                    afterLeave(){
                        console.log("动画离开之后");
                    }

                }
            });
            

            new Vue({
                el:"#box2",
                data:{
                    show:""
                }
            });

            new Vue({
                el:"#box3",
                data:{
                    show:"",
                    arr:["css","width","style","height","overflow"]
                },
                computed: { //
                    list(){
                        var a = [];
                        this.arr.forEach(function(val){
                            if(val.indexOf(this.show) != -1){ //通过输入内容来进行过滤
                                 a.push(val);
                            }
                        }.bind(this));
                        return a;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <button @click="show=!show">transition</button>
         <transition name="fade" 
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave"
        >     <!--name不可少 -->
            <p v-show="show"></p>
        </transition>
        <br>
        <br>
        <br>
    </div>
    <!--当有两个地方相同的动画  用transition-group 而且运动的元素必须有:key="indexz" -->
    <div id="box2">
        <button @click="show=!show">transitionGroup</button>
        <transition-group enter-active-class="zoomInLeft"  leave-active-class="zoomOutRight">    
            <p v-show="show" class="animated" :key="1"></p>
            <p v-show="show" class="animated" :key="2"></p>
        </transition-group>
    </div>
    <br>
    <br>
    <br>
    <!-- 数据循环出来 -->
    <div id="box3">
        <input type="text" v-model="show">
        <transition-group enter-active-class="zoomInLeft"  leave-active-class="zoomOutRight">    
            <p v-show="show" class="animated" v-for="(val, index) in list" :key="index">{{val}}</p>
        </transition-group>
    </div>
</body>
</html>